import React, { useState, useEffect, useRef  } from 'react';
import { Tooltip } from 'antd';
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
import style from '../DataBoard.css';
import ReactEcharts from 'echarts-for-react';
import GaugeChart from './GaugeChart';

function DataItem( { data, info, theme, fieldMaps }) {
    const { title, dataIndex, unit, hasSymbol, color, subArr } = info;
    return (
        <div className={style['card-container']}>
            <div className={style['card-container-title']} style={{ color:theme === 'dark' ? '#fff' : 'rgba(0, 0, 0, 0.85)' }}>{ title || '' }</div>
            
            {
                hasSymbol
                ?
                <div style={{ display:'flex', width:'100%', alignItems:'center' }}>
                    <div>
                        <span className={style['text']} style={{ color:theme === 'dark' ? '#fff' : '#000', margin:'0 4px' }}>{ data.cost ? Math.round(data.cost) : 0 }</span>
                        <span className={style['sub-text']}>{ unit || '' }</span>
                    </div>
                    <div style={{ height:'100px', flex:'1' }}>
                        <GaugeChart />
                    </div>
                </div>
                :
                <>
                    <div>
                        <span className={style['text']} style={{ color: color ? color : theme === 'dark' ? '#fff' : '#000' }}>{ data[dataIndex] ? Math.round(data[dataIndex]) : 0 }</span>
                        <span className={style['sub-text']}>{ unit || '' }</span>
                    </div>
                    <div>
                        {
                            subArr && subArr.length 
                            ?
                            subArr.map((sub, index)=>{
                                return (
                                <span key={sub.dataIndex} style={{ marginRight:'1rem' }}>
                                    <span style={{ marginRight:'4px' }}>{ sub.title }</span>
                                    <span style={{ color: data[sub.dataIndex] > 0 ? '#f53f3f' : '#14cb3f' }}>
                                        { sub.unit === '%' && data[sub.dataIndex] ? data[sub.dataIndex] > 0 ? '+' : '-' : null } 
                                        { sub.unit === '%' ? Math.abs(data[sub.dataIndex] || 0.0).toFixed(1) : data[sub.dataIndex] ? data[sub.dataIndex] : 0 }
                                        { sub.unit }
                                    </span>
                                </span>)
                            })
                            :
                            null
                        }
                    </div>
                </> 
            }             
        </div>
    )
}

function DataCardList({ list, data, theme, containerWidth, fieldMaps }){
    const containerRef = useRef();
    useEffect(()=>{
        let container = containerRef.current;
        function handleScroll(event){
            event.preventDefault();
            container.scrollLeft += event.deltaY
        }
        if ( container ){
            container.addEventListener('wheel', handleScroll);
        }
    },[]);
    return (
        // 高度高于外部容器，确认横向滚动条被外部容器隐藏掉
        <Tooltip title='通过滚轮滑动查看'>
            <div ref={containerRef} className={style['data-card-container']}>
            {/* 横向滚动条的样式重置 */}
            {
                list && list.length 
                ? 
                list.map((item,index)=>( 
                    <div className={style['card-container-wrapper']} key={item.key} style={{ width: containerWidth <= 1440 ? '25%' : '16.6%' }}>
                        <DataItem data={data[item.key] || {}} info={fieldMaps[item.key] || {}} theme={theme} />
                    </div>
                ))
                :
                null
            }
        </div>
        </Tooltip>
    )
}


export default React.memo(DataCardList);